<template>
    <div class="set_head">

        <el-page-header title="返回" @back="backFun" class="set_top_header">
        </el-page-header>

        <el-input class="set_input" v-model="s_username" placeholder="Please input">
            <template #prepend>用户昵称</template>
        </el-input>
        <el-input class="set_input" v-model="s_email" placeholder="Please input" :readonly="true">
            <template #prepend>用户邮箱</template>
        </el-input>
        <el-input class="set_input" v-model="s_password" placeholder="Please input" show-password>
            <template #prepend>用户密码</template>
        </el-input>

        <div class="set_button_div">
            <el-button @click="save_data()" class="option_button" type="primary" :disabled="this.save_cd">{{ this.save_text }}</el-button>
        </div>
    </div>
</template>

<script>
    import axios from "axios";
    import Qs from 'qs'
    import {ElMessage} from "element-plus";
    import { ElLoading } from 'element-plus'

    export default {
        name: "Set",
        data(){
            return {
                s_username: 'test',
                s_email: '000000@google.com',
                s_password: '________',
                save_cd: false,
                save_text: "保存",
            }
        },
        methods: {
          save_data(){
              let _this = this;
              this.save_cd = true
              this.save_text = '冷却中'
              setTimeout(function () {
                  _this.save_cd = false
                  _this.save_text = '保存'
              }, 5000)

              // 初始化加载动画
              const loading = ElLoading.service({
                  lock: true,
                  text: 'Loading',
                  background: 'rgba(0, 0, 0, 0.7)',
              })

              axios.post('/user/api/save_user_info_api', Qs.stringify({
                  "email": _this.s_email,
                  "password": _this.s_password,
                  "uname": _this.s_username
              }))
                  .then(function (response) {

                      // 获取response时，5秒后终止加载动画
                      setTimeout(() => {
                          loading.close()
                      }, 500)

                      if (response.data[0] === '1'){
                          ElMessage({message: "保存成功", type: 'success'})
                      }
                      else {
                          ElMessage({message: response.data[1], type: 'error'})
                      }
                  })
                  .catch(function (error) {

                      // 出现异常时，0.5秒后终止加载动画
                      setTimeout(() => {
                          loading.close()
                      }, 500)

                      console.log(error);
                      ElMessage({message: "服务器异常，保存失败", type: 'error'})
                  });

              // 5秒后终止加载动画
              setTimeout(() => {
                  loading.close()
              }, 5000)
          },
          backFun(){
              window.location.href = '/user/home'
          },
        },
        mounted() {
            let _this = this;
            window.onload = function () {
                const loading = ElLoading.service({
                    lock: true,
                    text: 'Loading',
                    background: 'rgba(0, 0, 0, 0.7)',
                })
                let this_ = _this;
                axios.post('/user/api/get_user_info_api')
                    .then(function (response) {
                        let user_data = response.data
                        this_.s_username = user_data.uname
                        this_.s_password = user_data.password
                        this_.s_email = user_data.email
                        setTimeout(() => {
                            loading.close()
                        }, 500)
                    })
                    .catch(function (error) {
                        console.log(error);
                        ElMessage({message: "服务器异常，获取用户信息失败", type: 'error'})
                    });
                setTimeout(() => {
                    loading.close()
                }, 5000)
            }
        },
    }
</script>

<style scoped>
    @import "../assets/css/set.css";

</style>